// 类似vue中的app.vue，是最大的组件，是其他组件的父组件
import logo from './logo.svg';
import './App.css';
// import Coma from './components/Coma.jsx'
// import ComEvent from './components/ComEvent';
import Combig from './components/ComBig';

// 函数式组件
function App() {
  let name = 'Ma Baoguo';
  let age = 70;
  let hasWude = false;
  let kongFu = [1,2,3,4,5];
  let obj = {
    title: '形意八卦掌门人',
    say: '耗子尾汁'
  }
  let myClass = 'red'
  let fontSize = 40;
  let freeStyle = {color: 'red'}
  // 返回一个vDom，渲染出来
  return (
    <div className="App">
      {/* <Coma></Coma> */}
      {/* <ComEvent></ComEvent> */}
      <Combig></Combig>
      <header className="App-header">
        <p>JSX语法的特点：
          1.允许js和html在同一行混写；
          2.花括号中是js代码，尖括号中是html的语法
          3.class在html中需要换成className；
          4.return元素时可以使用小括号包裹，避免自动插入分号</p>
        {/* 绑定标签属性:属性值加花括号，加了花括号就是变量 */}
        {/* className：在html中使用class时换成className，js中还用class */}
        {/* 属性值加了花括号，就是js变量的语法，可以有字符串拼接、变量替换、简单的运算 */}
        <img src={logo} className="App-logo" alt={name} />
        <p className={myClass+'font'}>{name}-----{age}-----{hasWude?'':'不'}讲武德</p>
        <p className={hasWude?'a': 'b'}>{kongFu[0]}</p>
        {/* 外层花括号表示是js变量；内层花括号表示是js对象 */}
        <p style={{'fontSize': fontSize+'px'}}>{obj.title}</p>
        <p style={freeStyle}>动态样式-style</p>
        {/* ======== 循环渲染 ========== */}
        {/* 加上小括号，表示是一个整体，避免自动插入分号 */}
        {
          kongFu.map((item, index)=>{
            return (
              <button key={index}>
                {item}
              </button>
            )
          })
        }
        {/* ======== 条件渲染 ========== */}
        {
          (function() {
            if(hasWude) {
              return <p>欢迎登录-{name}</p>
            }else {
              return <button>去登录</button>
            }
          })()
        }
      </header>
    </div>
  );
}

export default App;
